<template>
    <!-- 直播列表 -->
    <div>
        <div class="list-wrapper flex-wrap">
            <div class="list-item" v-for="(item, index) in list" :key="index" @click="toPage(item)">
                <div class="list-item-img">
                    <div class="item-default-img flex-wrap flex-middle flex-center" :style="{
                        background: 'url(' + item.imageHttpUrl + ') center no-repeat'
                    }" v-if="item.imageHttpUrl">

                        <div class="item-default-text ellipsis2" v-if="showTitle === '1'">{{item.name}}</div>
                    </div>
                    <div
                    class="item-default-img flex-wrap flex-middle flex-center"
                    :class="['live-' + item.liveStatus]"
                    v-else>
                        <div class="item-default-text ellipsis2">{{item.name}}</div>
                    </div>
                    <div class="list-item-status" v-if="item.liveStatus === '0' && getSurplusTime([item.startDate, item.endDate]) !== '已过期' && getSurplusTime([item.startDate, item.endDate]) !== '进行中'">距离直播还有{{getSurplusTime([item.startDate, item.endDate])}}</div>
                    <div class="list-item-status" v-else-if="item.liveStatus === '0'">开播时间到了，等待主播开播</div>
                    <div class="list-item-status" v-else-if="item.liveStatus === '1'">进行中</div>
                    <div class="list-item-status end" v-else>{{item.realStartDate || item.startDate}}</div>
                    <div :class="['list-item-icon', 'icon-' + item.liveStatus]">{{getStatus(item.liveStatus)}}</div>
                </div>
                <div class="item-body">
                    <button class="fs-14 backVideo" v-if="mode=='2'&&item.liveStatus==2" @click.stop='goDetail(item)'>{{item.liveRecord&&item.liveRecord.recordStatus =='10' && item.liveRecord.replayUrl?"回放":"暂无回放"}}</button>
                    <div class="item-title fs-14 fc-333 ellipsis bold flex-wrap flex-between flex-text-mid">
                      <span class="mr20 ellipsis"> {{item.name}}</span>
                      <template v-if="item.needPayFlag === '1'">
                        <div class="ml10">
                          <span class="font-18 fc-buy bold">¥</span>
                          <span class="font-28 fc-buy bold">{{item.viewPrice}}</span>
                        </div>
                      </template>
                    </div>
                  <div class="item-icon-wrap">
                        <p class="fs-12 fc-999">主播：{{item.authorUserName}}</p>
                       
                    </div>
                    <div class="item-icon-wrap">
                        <p class="fs-12 fc-999">分类：{{item.categoryName}}</p>
                    </div>
                    <div class="item-icon-wrap">
                        <p class="fs-12 fc-999">学员：{{ item.studyStuNum }}人已加入</p>
                    </div>
                    <div class="item-icon-wrap">
                        <p class="fs-12 fc-999">时长：{{ item.livingDurationStr || getTime(item.livingDuration) }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getTime, getSurplusTime,$toast } from '@/assets/js/util'
import { qywxLiveStatus, courseTypes } from '@/assets/js/constant'
export default {
    data() {
        return {
            statusList: ['未开始', '已开始', '考试中', '已考', '已过期']
        }
    },
    props: {
        list: {
            type: Array,
            default: () => []
        },
        vertical: { // 竖版显示
            type: Boolean,
            default: false
        },
        pageKey: { // 跳转id的key
            type: String,
            default: ''
        },
        progress: { // 是否显示课程学习进度（我的课程有效）
            type: Boolean,
            default: false
        },
        hideReco: {
            type: Boolean,
            default: false
        },
        activeName:{
            type:Number,
            default:1
        },
        mode:{
            type:String,
            default:'1'
        }
    },
    mounted() {
    },
    methods: {
        getStatus(val) {
            let ob = qywxLiveStatus.find(e => e.status == val)
            return ob ? ob.name : '未知'
        },
        getTime(s) {
            return getTime(s)
        },
        getSurplusTime(s) {
            return getSurplusTime(s)
        },
        goDetail(item) {
            if(item.liveRecord.recordStatus !='10' && !item.liveRecord.replayUrl){
                $toast.warning('直播回放还未生成')
            }else{
                this.$uniPush({
        name: "live-living-id",
        params: {
          id: item.courseId
        }
      })
            }
     
    },
        toPage(item) {
            if(item.liveStatus != '2' && this.getSurplusTime([item.startDate, item.endDate]) !== '已过期'&&this.activeName=='2'){
                $toast.warning('直播开启，请前往pc端进行操作')
                return
            }
            this.$uniPush({
                name: 'live-detail-id',
                params: {
                    id: item.courseId
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.list-wrapper{
    flex-wrap: wrap;
    padding: 10px 15px 4px;
    background: #F6F6F6;
    .list-item{
        width: 100%;
        padding: 0 0 10px;
        position: relative;
        background: #fff;
        margin-bottom: 15px;
        border-radius: 7px;
        overflow: hidden;
        .list-item-img{
            position: relative;
            width: 100%;
            height: calc((100vw - 30px)/16*9);
            margin-bottom: 5px;
            .item-default-img{
                width: 100%;
                height: calc((100vw - 30px)/16*9);
                background: url("/static/image/course-img.png") no-repeat;
                background-size: contain !important;
                .item-default-text{
                    font-size: 18px;
                    color: #fff;
                    text-align: center;
                    padding: 0 10px;
                }
            }
            .list-item-status{
                color: #fff;
                font-size: 14px;
                bottom: 0;
                left: 0;
                width: 100%;
                padding: 6px 0;
                position: absolute;
                text-align: center;
                background: rgba(30,166,157,0.74);
                &.end{
                    background: rgba(0, 0, 0, 0.74);
                }
            }
            .list-item-icon {
                position: absolute;
                top: 3px;
                left: 3px;
                padding: 0 5px;
                border-radius: 10px 10px 0 10px;
                font-size: 12px;
                color: #fff;
                line-height: 18px;
                white-space: nowrap;
                border: 1px solid #fff;
                &.icon-0{
                    background: #4DA9FB;
                }
                &.icon-1{
                    background: #98C963;
                }
                &.icon-2{
                    background: #999999;
                }
            }
        }
        .item-body{
            padding: 5px 15px;
            position: relative;
        }
        .item-icon-wrap{
            padding: 8px 0 0;
            .item-icon{
                font-size: 10px;
                color: #7F7F7F;
                height: 16px;
                line-height: 16px;
                padding: 0 4px;
                background: #F5F5F5;
                border-radius: 2px;
                & + .item-icon{
                    margin-left: 4px;
                }
            }
        }
        .item-data{
            height: 25px;
            .item-data-item{
                &+ .item-data-item:before{
                    content: '|';
                    margin: 0 6px;
                }
            }
        }
    }
}
.backVideo{
    position: absolute;
    padding: 0px 15px;
    right: 20px;
    top: 20px;
    color: #fff;
    background: #1EA69D;
}
</style>
